HTML 屬性項與 JS 屬性有名稱上的差異，例如 class 為 JS 語言保留字，所以屬性為 className。

這章想學到什麼？

• 認識屬性項（attribute）和屬性（property）的名稱差異
• 自定義屬性項（HTML5）
• <form> id 屬性複寫問題

程式碼閱讀練習與撰寫

認識屬性項（attribute）和屬性（property）的名稱差異

自定義屬性項（HTML5）

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
</article>

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

<form> id 屬性複寫問題

<form action="/" id="testForm">
  <input type="text" id="id">
  <input type="text" name="action">
</form>

參考資料

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
https://developer.mozilla.org/zh-TW/docs/Web/API/Element/getAttribute
https://kinsta.com/blog/xml-vs-html/#what-is-xml